<template>
  <view class="wrapper">
    <view class="nothing" v-if="list.length === 0">暂无相关信息..</view>
    <view v-else class="item" v-for="item in list" :key="item.id">
      <view class="title" v-if="item.material">{{item.material.title}}</view>
      <view class="content">{{item.content}}</view>
      <view class="time">{{item.create_time}}</view>
    </view>
  </view>
</template>

<script>
import color from '@/config/color.js'
import config from '../../config/config'
import base64 from '../../util/base64'

import Material from '../../api/material'
const materialModel = new Material()

export default {
  data() {
    return {
      total: 0,
      queryList: {
        page: 0,
        pageSize: 20,
        busy: false
      },
      list: [],
    }
  },
  onReachBottom() {
    this.getList(true)
  },
  methods: {
    init() {
      this.queryList = {
        page: 0,
        pageSize: 20,
        busy: false
      }
      this.list = []
      this.total = 0
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        materialModel.commentList({
          ...this.queryList,
          id: this.id
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
          this.total = data.quantity
          // console.log(this.list.map(x => x.id))
          console.log(this.list)
          uni.stopPullDownRefresh();
        }).finally(() => {
        })
      }
    },
  },
  onLoad(options) {

  },
  onHide() {
    this.init()
  },
  onShow() {
    this.init()
    this.getList()
  }
}


</script>

<style lang="scss" scoped>
.nothing {
  //margin: 20rpx;
  background: white;
  padding: 20rpx;
  font-size: 24rpx;
  color: #cccccc;
  border-radius: 10rpx;
}
.wrapper {
  padding: 20rpx;
  background: #f3f5f7;
  .item {
    margin-bottom: 30rpx;
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
    .title {
      font-size: 24rpx;
      margin-bottom: 20rpx;
    }
    .content {
      font-size: 28rpx;
    }
    .time {
      font-size: 20rpx;
      color: #999999;
      margin-top: 20rpx;
    }
  }
}
</style>
